<template>
  <div id="page-a">
    页面A
    <el-button @click="changeArray">修改Array数组</el-button>
    <!-- <div v-for="item in array" :id="item" :class="{'list-item': true,'active-list':item===3}" :key="item">
      {{ item }}
    </div> -->
    <div v-for="item in array" :style="{marginBottom:'20px',backgroundColor:'#00FF00',fontSize: '15px'}" :id="item"
      :class="['list-item',item===3?'active-list':'']" :key="item">
      <el-checkbox :label="`Label${item}`"></el-checkbox>
    </div>
    <!-- <el-input v-model="inputValue"></el-input> -->
    <!-- <div class="tab-list">
      <el-button @click="tabClick(1)">
        Tab1
      </el-button>
      <el-button @click="tabClick(2)">
        Tab2
      </el-button>
    </div> -->
    {{ num }}
    <hr>
    com-child组件开始使用
    <!-- {{ getResult() }} -->
    <!-- <TabComp v-module="num"></TabComp> -->
    <KeepAlive>
      <com-child>
        <template slot-scope="props">
          <span>hello from parent</span>
          <span>{{ props.text }}</span>
        </template>
      </com-child>
    </KeepAlive>
    <hr>
    <TabComp ref="childRef" :value="123" @input="sumFunc">
      <template slot="head" slot-scope="scope">
        <div>{{ scope.info }}</div>
      </template>
      <div slot="foot">自定义尾部信息</div>
      <!-- <div class="custom-msg">{{ msg }}</div> -->
    </TabComp>
  </div>
</template>

<script type="text/javascript">
import TabComp from '@/components/TabComp.vue';
import ComChild from '@/components/ComChild.vue';
//import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: "PageA",
  components: {
    TabComp,
    ComChild
  },
  data() {
    return {
      msg: '信息',
      num: 0,
      addNum: 10,
      curTab: 1,
      inputValue: '123',
      array: [1, 2, 3, 4]
    }
  },
  // computed: {
  //   result() {
  //     return this.num + this.addNum + this.curTab
  //   }
  // },
  // watch: {
  //   num: {
  //     immediate: false,
  //     handler(nValue, oValue) {
  //       console.log(nValue, oValue)
  //       // this.aNum = num/3
  //       // this.bNum = num/2
  //     },
  //     deep: {

  //     }
  //   }
  // },
  activated() {
    console.log('组件激活了')
  },
  deactivated() {
    console.log('组件失活了')
  },
  beforeCreate() {
    console.log(3)
  },
  created() {
    // this.func()
    console.log(4)
    this.$eventbus.$on('addNumber', (num) => {
      this.num += num
    })

    let computedWather = {
      value: null,
      dirty: false,// true
      getValue() {
        if (this.dirty === false) {
          return this.value
        } else {
          // 给这个vue实例加上一个属性，result
          // this.result.get()
          // 重新计算赋值value

        }
      }
      //如果依赖的变量值改变了，我就computedWatcher内部的dirty改成true
    }
    console.log(computedWather)
  },
  beforeMount() {
    console.log(5)

  },
  mounted() {
    console.log(6)

  },
  beforeUpdate() {
    console.log('更新之前')
  },
  updated() {
    console.log('更新之后')
  },
  beforeDestroy() {
    console.log(7)
    this.$eventbus.$off(['addNumber', 'getData'])
  },
  destroyed() {
    console.log(8)
  },
  methods: {
    getResult() {
      return this.num + this.addNum + this.curTab
    },
    tabClick(data) {
      this.curTab = data
    },
    sumFunc() {
      console.log(this)
      this.num -= 1
    },
    changeArray() {
      this.array.unshift(10)
      // console.log('触发了change')
      // // this.array[2] = 100
      // this.array.push(1000)
      // this.num = 1
      // this.num = 2
      //更新视图的任务 
      //nextTick()利用setTimeout 或者Promise包含的任务加到了更新任务的后边

      // this.array.push({name: '张学友'}) 
      // setTimeout(() => {

      // })
      // this.$nextTick(() => {
      //   let dom = document.getElementById('1000')
      //   console.log(dom)
      // })
      // console.log(this.array)
    }
  }
}
</script>

<style lang="scss" scoped>
.list-item {
  margin: 10px 0;
  background: #ddd;
}
</style>